<template>
  <div id="article">
    <h1 class="article-title text-bold">{{ article.title }}</h1>
    <div class="article-info">
      <p v-if="article.category" class="article-category">
        <span class="icon-folder"></span>
        {{ article.category.name }}
      </p>
      <p class="article-date">
        <span class="icon-calendar"></span>
        {{ article.publishTime | time('yyyy-MM-dd') }}
      </p>
      <p class="article-date">
        <span class="icon-eye"></span> {{ article.hits }}
      </p>
      <p class="article-date">
        <span class="icon-bubble2"> {{ article.commentCount }} </span>
      </p>
    </div>
    <div v-prism class="markdown-body" v-html="article.contentHtml"></div>
    <div v-if="article.tags" class="article-tags">
      <label class="label-tags">Tags:</label>
      <span v-for="tag in article.tags" :key="tag.id" class="article-tag">
        <nuxt-link :to="{ path: '/tag/' + tag.name }"
          >#{{ tag.name }}</nuxt-link
        >
      </span>
    </div>
    <nav class="markdown-toc toc"></nav>
    <comment v-if="article.allowComment" :article-id="article.id"></comment>
    <big-img :visible.sync="isBigImg" :img="img"></big-img>
  </div>
</template>

<script type="text/ecmascript-6">
import tocbot from "tocbot";
import Comment from "~/components/Comment.vue";
import BigImg from "~/components/BigImg.vue";

export default {
  components: {
    Comment,
    BigImg
  },
  data() {
    return {
      isBigImg: false,
      img: ""
    };
  },
  fetch({ store, params }) {
    return store.dispatch("getArticle", params.id);
  },
  head() {
    return { title: `${this.article.title}` };
  },
  computed: {
    article() {
      return this.$store.state.article.detail;
    }
  },
  mounted() {
    this.tocInit();
    this.initEvent();
  },
  methods: {
    initEvent() {
      const markdown = document.getElementsByClassName("markdown-body")[0];
      const imgs = markdown.getElementsByTagName("img");
      const _this = this;
      for (let i = 0; i < imgs.length; i++) {
        imgs[i].addEventListener("click", (e) => {
          e.stopPropagation();
          _this.isBigImg = true;
          _this.img = imgs[i].getAttribute("src");
        });
      }
    },
    tocInit() {
      const headingSelector = "h1, h2, h3, h4";
      const body = document.getElementsByClassName("markdown-body");
      if (body) {
        const tag = body[0].querySelectorAll(headingSelector);
        tag.forEach(function(el) {
          el.setAttribute("id", el.innerHTML);
        });
      }
      tocbot.init({
        tocSelector: ".markdown-toc",
        contentSelector: ".markdown-body",
        headingSelector
      });
      // 延时显示，防止闪烁
      setTimeout(function() {
        document.getElementsByClassName("markdown-toc")[0].style.opacity = 1;
      }, 500);
    }
  }
};
</script>

<style>
@import '~/assets/css/markdown-toc.css';

#article .markdown-body img {
  max-width: 100% !important;
  margin: 0.5rem auto;
  text-align: center;
  border-radius: 4px;
  transition: all 0.25s;
  cursor: zoom-in;
}
</style>

<style scoped>
.markdown-toc {
  position: fixed !important;
  min-width: calc((100% - 1200px) / 2);
  max-width: calc((100% - 1000px) / 2);
  max-height: calc(100% - 120px);
  right: 0;
  top: 100px;
  opacity: 0;
  transition: all 0.3s;
}

@media screen and (max-width: 1300px) {
  .markdown-toc {
    display: none;
  }
}

.article-title {
  color: #34495e;
  margin: 1.2em 0 0;
  font-size: 2.2em;
}

.article-date {
  color: #50596c;
  display: inline-block;
  margin-left: 8px;
}

.article-category {
  color: #50596c;
  display: inline-block;
  margin-right: 8px;
}

.article-tags {
  margin: 15px 0;
}

.article-tags .label-tags {
  margin-right: 6px;
  font-size: 16px;
  font-weight: 600;
  color: #34495e;
}

.article-tags .article-tag {
  font-weight: bold;
  color: #5764c6;
  margin: 0 0.2em;
}

.article-tags .article-tag a {
  color: unset;
  text-decoration: none;
  transition: all 0.3s;
}

.article-tags .article-tag a:hover {
  color: #999;
}

.article-tags .article-tag:nth-child(1n) {
  color: #6fa3ef;
}

.article-tags .article-tag:nth-child(2n) {
  color: #ff9800;
}

.article-tags .article-tag:nth-child(3n) {
  color: #46c47c;
}

.article-tags .article-tag:nth-child(4n) {
  color: #f9bb3c;
}

.article-tags .article-tag:nth-child(5n) {
  color: #bc99c4;
}

@media screen and (max-width: 600px) {
  .article-title {
    font-size: 1.8em;
  }
}
</style>
